﻿@using DevExpress.Blazor.Internal
<DemoPageSectionComponent Id="DialogsAndWindows-DropDown-Flipping" ShowSizeMode="true">
    <OptionsContent>
        <OptionComboBox Label="Close mode:" CssClass="ow-100" Data="@CloseModeSource" @bind-Value="@CloseMode"/>
        <OptionCheckBox Label="Fit to container" @bind-Checked="FitToRestriction"/>
    </OptionsContent>
    <ChildContentWithParameters Context="Params">
        <div class="@(IsMobile ? "" : "card") flipping-overflow-container">
            <dxbl-demo-scrollable center-horizontally center-vertically id="flipping-target-container" class="flipping-overflow-content">
                <DxButton
                    CssClass="flipping-button" Click="() => IsOpen = !IsOpen"
                    RenderStyle="@ButtonRenderStyle.Secondary">SHOW A DROPDOWN</DxButton>
            </dxbl-demo-scrollable>
            <DxDropDown
                @bind-IsOpen="@IsOpen"
                CloseOnOutsideClick="false"
                PositionMode="DropDownPositionMode.Bottom"
                PositionTarget=".flipping-button"
                RestrictionTarget=".flipping-overflow-container"
                RestrictionMode="DropDownRestrictionMode.TargetElement"
                PreventCloseOnPositionTargetClick="true"
                CloseMode="@CloseMode"
                FitToRestriction="@FitToRestriction"
                SizeMode="Params.SizeMode"
                Width="240">
                <span style="font-size: 0.75rem">@Constants.ContentShort</span>
            </DxDropDown>
        </div>
    </ChildContentWithParameters>

    @code {

        [Inject]
        IEnvironmentInfo EnvironmentInfo { get; set; }
        bool IsOpen { get; set; } = false;
        bool IsMobile { get; set; }
        bool FitToRestriction { get; set; } = true;
        DropDownCloseMode[] CloseModeSource { get; } = Enum.GetValues<DropDownCloseMode>();
        DropDownCloseMode CloseMode { get; set; } = DropDownCloseMode.Hide;

        protected override async Task OnAfterRenderAsync(bool firstRender) {
            if (firstRender) {
                await EnvironmentInfo.InitializeRuntime();
                var deviceInfo = await EnvironmentInfo.DeviceInfo;
                IsMobile = deviceInfo.IsMobileDevice;
            }
            await base.OnAfterRenderAsync(firstRender);
        }
    }

</DemoPageSectionComponent>
